<!--
 * @Author: 偻儸小卒[EdisonLiu_]
 * @Date: 1970-01-01 08:00:00
 * @LastEditors: 偻儸小卒[EdisonLiu_]
 * @LastEditTime: 2020-03-23 14:16:53
 * @Description: 
 -->
 
 <style>
body {
  padding: 0;
  margin: 0;
  -webkit-user-select: none; /* 禁止文本被选中 */
  overflow: hidden;
}
</style>

<style scoped>
html,
body,
#app,
.page-content {
  height: 100%;
}

.page-content {
  display: flex;
}
.page-content .left-nav {
  width: 200px;
  transition: 0.8s;
  background: linear-gradient(to right, #ccc, #ddd, #ccc);
  position: relative;
}
.page-content .left-nav.min {
  margin-left: -200px;
}
.page-content .left-nav .logo {
  height: 80px;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  background: #dedede;
}

.page-content .left-nav .nav-item .item {
  background: #333;
  color: white;
  height: 50px;
  line-height: 50px;
  padding-left: 10px;
  border-bottom: 1px solid #000;
  cursor: pointer;
}
.page-content .left-nav .nav-item .item:hover {
  background: #444;
}

.page-content .left-nav .nav-item .item.active {
  background: #555;
}

.page-content .left-nav .play_box {
  position: absolute;
  bottom: 7px;
  left: 0;
  width: 100%;
  height: 80px;
  border-top: #444 1px solid;
  background: rgba(255, 255, 255, 0.1);
}
.page-content .left-nav .play_box > div {
  position: relative;
}
.page-content .left-nav .play_box > div .play_li {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  right: 8px;
  top: 10px;
  height: 70px;
  width: 20px;
}
.page-content .left-nav .play_box > div .play_li img {
  /* width: 100%; */
  height: 25px;
  display: block;
  cursor: pointer;
}
.page-content .left-nav .play_box > div .play_btns {
  padding: 10px 30px;
  display: flex;
  align-items: center;
}
.page-content .left-nav .play_box > div .play_btns > div {
  flex: 10;
  margin: 3px;
}
.page-content .left-nav .play_box > div .play_btns > div:nth-child(2) {
  flex: 15;
}
.page-content .left-nav .play_box > div .play_btns > div img {
  width: 100%;
  cursor: pointer;
}

.page-content .right-content {
  width: calc(100% - 200px);
  transition: 0.8s;
}
.page-content .right-content.max {
  width: 100%;
}
.page-content .right-content header {
  width: calc(100% - 20px);
  height: 50px;
  line-height: 50px;
  padding: 0 10px;
  background: #ccc;
  display: flex;
  -webkit-app-region: drag;
}
.page-content .right-content header .left-icon {
  width: 10%;
  height: 100%;
  cursor: pointer;
  -webkit-app-region: no-drag;
}
.page-content .right-content header .title {
  width: 75%;
  height: 100%;
  text-align: center;
}
.page-content .right-content header .right-icon {
  height: 100%;
  width: 15%;
  -webkit-app-region: no-drag;
  text-align: right;
}

.page-content .right-content .wrapper {
  padding: 10px;
  height: 500px;
}
.page-content .right-content .wrapper main > div > div {
  /* margin: 20px 0; */
}

.page-content .right-content .wrapper main > div.page_content {
  display: flex;
}
.page-content .right-content .wrapper main > div.page_content > div {
  margin: 0;
}
.page-content .right-content .wrapper main > div.page_content > .content {
  flex: 20;
}
.page-content .right-content .wrapper main > div.page_content > .list {
  flex: 8;
  max-height: 500px;
  overflow-y: auto;
}
.page-content .right-content .wrapper main > div.page_content > .list ul {
  list-style-type: none;
}
.page-content .right-content .wrapper main > div.page_content > .list ul li {
  border-bottom: 1px solid #ccc;
}

.page-content .right-content .wrapper main input[type="text"] {
  width: 300px;
  height: 40px;
  line-height: 40px;
  border-radius: 15px;
  border: 1px solid #ccc;
  padding-left: 10px;
}
.page-content .right-content .wrapper main textarea {
  width: 100%;
  height: 38vh;
}
</style>
<style>
.aplayer-list {
  height: 400px !important;
  overflow-y: auto !important;
}
/* 歌词全屏 */
.aplayer.lrc_full_screen {
  position: relative;
}
.aplayer.lrc_full_screen .aplayer-lrc {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000 !important;
  background: #ccc;
}
</style>
<template>
  <div class="page-content">
    <div class="left-nav" :class="{ min: check_nav }">
      <div class="logo">logo</div>

      <el-menu
        :default-active="default_active"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        router
        active-text-color="#ffd04b"
      >
        <!-- <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu> -->
        <el-menu-item index="/main/translate">
          <i class="el-icon-menu"></i>
          <span slot="title">快捷翻译</span>
        </el-menu-item>
        <el-menu-item index="/main/jsdecode">
          <i class="el-icon-setting"></i>
          <span slot="title">JS解密</span>
        </el-menu-item>
        <el-menu-item index="/main/timestr">
          <i class="el-icon-setting"></i>
          <span slot="title">时间戳</span>
        </el-menu-item>
        <el-menu-item index="/main/note">
          <i class="el-icon-setting"></i>
          <span slot="title">桌面便签</span>
        </el-menu-item>
        <el-menu-item index="/main/generator">
          <i class="el-icon-setting"></i>
          <span slot="title">代码机器</span>
        </el-menu-item>

        <el-menu-item index="/main/ofmonkey">
          <i class="el-icon-setting"></i>
          <span slot="title">第三方工具（依赖互联网）</span>
        </el-menu-item>
      </el-menu>

      <div class="play_box">
        <div>
          <div class="play_li">
            <img
              src="~@/assets/icon_text.png"
              @click="
                check_tab = 1011;
                lrc_full_screen = 0;
                refresh_music();
              "
              alt="详情"
            />
            <img
              src="~@/assets/icon_text.png"
              @click="
                check_tab = 1011;
                lrc_full_screen = 1;
              "
              alt="歌词"
            />
          </div>
          <div class="play_btns">
            <div>
              <img
                src="~@/assets/icon_previous.png"
                @click="btn_previous"
                alt="electron-vue"
              />
            </div>
            <div>
              <img
                v-if="is_play == 0"
                @click="aud_pllay(1)"
                src="~@/assets/icon_play.png"
                alt="electron-vue"
              />
              <img
                v-if="is_play == 1"
                @click="aud_pllay(0)"
                src="~@/assets/icon_stop.png"
                alt="electron-vue"
              />
            </div>
            <div>
              <img
                src="~@/assets/icon_next.png"
                @click="btn_next"
                alt="electron-vue"
              />
            </div>
          </div>
          <div class="play_">进度</div>
        </div>
      </div>
    </div>
    <div class="right-content" :class="{ max: check_nav }">
      <header>
        <div class="left-icon" @click="check_nav = !check_nav">
          <span v-if="!check_nav">《</span>
          <span v-if="check_nav">》</span>
        </div>

        <div class="title">
          {{ appconfig.productName }}--{{ appconfig.author }}【跨平台桌面版】
          {{ appconfig.version }} build-{{ appconfig.version_time }} 
        </div>

        <div class="right-icon">
          <input type="button" @click="min" value="-" />
          <input type="button" @click="max" value="O" />
          <input type="button" @click="close" value="x" />
        </div>
      </header>
      <div class="wrapper" v-show="check_tab != 1011 ? true : false">
        <!-- <slot name="body">Body</slot> -->
        <router-view></router-view>
      </div>

      <aplayer
        v-show="check_tab == 1011 ? true : false"
        :class="{ lrc_full_screen: lrc_full_screen == 1 }"
        ref="player"
        theme="pic"
        repeat="list"
        showLrc
        :narrow="false"
        :music="music"
        :list="music_list"
        @play="play_event"
        @pause="pause_event"
        @playing="playing_event"
      />
    </div>
  </div>
</template>
<script>
import packConfig from "../../../../package.json";
//下面是音乐播放器
import VueAplayer from "vue-aplayer";
import path from "path";
import { ipcRenderer, remote } from "electron";
import { constants } from "fs";
const fs = require("fs");
import md5 from "js-md5";

export default {
  name: "index",
  components: {
    aplayer: VueAplayer,
  },
  data() {
    return {
      appconfig: packConfig,
      default_active: "/main/translate",
      check_nav: 0,

      loading_music: 0, //是否加载完
      music_index: 0,
      music_ids: [], //防止歌曲列表重复
      music_list_obj: {},
      music_list: [],
      music: {
        // title: "王菲 - 红豆",
        // src: "file:/home/edison/Music/王菲 - 红豆.mp3",
        // lrc: "file:/home/edison/Music/王菲 - 红豆.lrc",
        // artist: "王菲",
        // pic: "file:/home/edison/Music/王菲 - 红豆.jpg"
      },
      lrc_full_screen: 0, //歌词全屏
      is_read: 0,
      is_play: 0,
    };
  },
  created: function () {
    var that=this
    //监听主进程发来的消息
    this.$electron.ipcRenderer.on("main-process-messages", (event, arg) => {
      if (arg == "show_window") {
        //加一点延时防止切换未完成找不到dom的情况
        setTimeout(() => {
          that.default_active="/main/translate"
         that.$router.push('/main/translate');
        }, 100);
      }
      if (arg == "play_music") {
        this.aud_pllay(!this.is_play);
      }
      if (arg == "play_previous") {
        this.btn_previous();
      }
      if (arg == "play_next") {
        this.btn_next();
      }
    });
    // `this` 指向 vm 实例
    //查询翻译历史记录is_play
    this.get_history_translate();
    this.onload_music().then(() => {
      setTimeout(() => {
        this.music = this.music_list[this.music_index];
        this.loading_music = 1;

        setTimeout(() => {
          let aplayer = this.$refs.player;
          // aplayer.play();
          // this.is_play = 1;
        }, 50);
      }, 1000);
    });
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
      debugger;
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSelect(key, keyPath) {
      var that = this;
        that.default_active = key;
        that.check_tab=0;
    },
    //下面是系统方法
    close() {
      this.$electron.ipcRenderer.send("close_mainwindow");
    },
    min() {
      this.$electron.ipcRenderer.send("min_mainwindow");
    },
    max() {
      if (this.window_max) {
        this.$electron.ipcRenderer.send("unmax_mainwindow");
      } else {
        this.$electron.ipcRenderer.send("max_mainwindow");
      }
      this.window_max = !this.window_max;
    },

    refresh_music() {
      this.onload_music().then(() => {
        setTimeout(() => {
          this.music = this.music_list[this.music_index];
          this.loading_music = 1;

          setTimeout(() => {
            let aplayer = this.$refs.player;
            // aplayer.play();
            // this.is_play = 1;
          }, 50);
        }, 800);
      });
    },
    async onload_music() {
      let music_path = path.join(remote.app.getPath("music"));
      let in_array = function (search, array) {
        for (var i in array) {
          if (array[i] == search) {
            return true;
          }
        }
        return false;
      };
      //获取歌词和图片等
      let resources = (basename, ext) => {
        return new Promise((resolve, reject) => {
          let res_path = path.join(music_path, basename + "." + ext);
          fs.exists(res_path, (exists) => {
            if (exists) {
              resolve("file:" + res_path);
            } else {
              resolve(false);
            }
          });
        });
      };

      fs.readdir(music_path, (err, files) => {
        if (err) throw err;
        this.music_ids = [];

        files.forEach((file) => {
          //拼接获取绝对路径，fs.stat(绝对路径,回调函数)
          let fPath = path.join(music_path, file);
          fs.stat(fPath, async (err, stat) => {
            if (stat.isFile()) {
              //如果是文件 （这里只需要读文件）
              //stat 状态中有两个函数一个是stat中有isFile ,isisDirectory等函数进行判断是文件还是文件夹
              //获取文件扩展名
              let exts = [".mp3", ".m4a"];
              let extname = path.extname(fPath); //扩展名
              let basename = path.basename(fPath).split(".")[0];
              //如果是音乐文件 并且音乐列表中没有这个文件
              if (in_array(extname, exts)) {
                //刷新标识数
                this.music_ids.unshift(md5(fPath));
                let music = {};
                if (!this.music_list_obj[md5(fPath)]) {
                  //写入数组
                  music = {
                    title: basename,
                    src: "file:" + fPath,
                    mus_id: md5(fPath),

                    artist: basename.split("-")[0].trim(),
                  };
                  let lrc = await resources(basename, "lrc");
                  let pic =
                    (await resources(basename, "jpg")) ||
                    (await resources(basename, "png"));

                  if (lrc) {
                    music.lrc = lrc;
                  }
                  if (pic) {
                    music.pic = pic;
                  }

                  this.music_list.unshift(music);
                  //如果默认播放音乐为空 则写入

                  this.music_list_obj[md5(fPath)] = music;
                }
              }
            }
            // else { //如果是目录
            //     myReadfile(fPath)
            // }
          });
        });

        //删除文件夹已经不存在的音乐 如果删除的是正在播放的音乐则 暂停播放切换到下一曲
        setTimeout(() => {
          let aplayer = this.$refs.player;
          var obj_music = aplayer.currentMusic; //获得播放器当前播放的音乐
          this.music_list.forEach((item, index) => {
            if (!in_array(item.mus_id, this.music_ids)) {
              this.music_list.splice(index, 1);
              delete this.music_list_obj[item.mus_id];
              if (item.mus_id == obj_music.mus_id) {
                this.btn_next();
                setTimeout(() => {
                  aplayer.pause();
                  this.is_play = 0;
                }, 60);
              }
            }
          });
          //刷新当前播放音乐索引
          this.music_list.forEach((item, index) => {
            if (item.mus_id == obj_music.mus_id) {
              this.music_index = index;
            }
          });
        }, 2000);
      });
    },
    aud_pllay(play) {
      let aplayer = this.$refs.player;
      if (play == 1) {
        aplayer.play();
      } else {
        aplayer.pause();
      }
      this.is_play = play;
    },
    play_event() {
      this.is_play = 1;
      //开始播放 同步当前播放歌曲索引
      let aplayer = this.$refs.player;
      var obj_music = aplayer.currentMusic; //获得播放器当前播放的音乐
      var obj_music_lict = JSON.parse(JSON.stringify(this.music_list));
      // var sum_music = obj_music_lict.length;
      obj_music_lict.forEach((item, index) => {
        if (item.mus_id == obj_music.mus_id) {
          this.music_index = index;
        }
      });
    },
    //暂停
    pause_event() {
      this.is_play = 0;
    },
    playing_event() {},
    //上一曲
    btn_previous() {
      let aplayer = this.$refs.player;
      var obj_music = aplayer.currentMusic; //获得播放器当前播放的音乐

      var obj_music_lict = JSON.parse(JSON.stringify(this.music_list));
      var sum_music = obj_music_lict.length;

      //先拿到当前播放的歌曲索引
      // obj_music_lict.forEach((item, index) => {
      //   if (item.mus_id == obj_music.mus_id) {
      //     this.music_index = index;
      //   }
      // });

      if (this.music_index == 0) {
        this.music_index = sum_music - 1;
      } else {
        this.music_index--;
      }
      this.music = this.music_list[this.music_index];

      setTimeout(() => {
        let aplayer = this.$refs.player;
        aplayer.play();
        this.is_play = 1;
      }, 50);
    },
    //下一曲
    btn_next() {
      var obj_music_lict = JSON.parse(JSON.stringify(this.music_list));
      var sum_music = obj_music_lict.length;
      if (this.music_index == sum_music - 1) {
        this.music_index = 0;
      } else {
        this.music_index++;
      }
      this.music = this.music_list[this.music_index];

      setTimeout(() => {
        let aplayer = this.$refs.player;
        aplayer.play();
        this.is_play = 1;
      }, 50);
    },
  },
};
</script>

